<template>
	<div class="studentAttenceContainer" v-if="studentdetailprop">
		<el-dialog	
			  :visible.sync="isShow"			 
			  custom-class="el-dialog-bg"
			  :close-on-click-modal="modalclose"
			  :before-close="handleClose">
			  <div slot="title" class="panel_title"><span>{{studentdetailprop.realName}}</span><span style="font-size: .2rem;">（课程考勤）</span></div>	          
		      <div class="attenceList">
		      	 <div class="tablecss">
              		<table style="width:100%;" cellpadding="0" cellspacing="0">
			      			<thead >
			      				<tr>
			      					<th>上课时间</th>
			      					<th>考勤状态</th>
			      					<th>消耗课时/课次</th>						    					
			      					<th>签到人</th>
			      					<th>操作</th>
			      					
			      				</tr>
			      			</thead>
			      			<tbody  v-if="AttendenceList.length>0">
			      				<tr v-for="li in AttendenceList">
			      					
			      					<td align="center">
			      						<span>{{li.className}}</span><br>
									    <!-- <span>第{{li.orderBy}}次课</span><br> -->
									     <span>{{li.startTime.split(" ")[0]}}</span>
			      					</td>
			      					<td align="center">
			      						<span v-if="li.signinMode==1">签到</span>
								     	<span v-else-if="li.signinMode==2">迟到</span>
								     	<span v-else-if="li.signinMode==3">请假</span>
								     	<span v-else-if="li.signinMode==4">补课</span>
								     	<span v-else-if="li.signinMode==5">旷课</span>
			      					</td>
			      					<td align="center">{{li.consumeHour}}</td>
			      					<td align="center">{{li.siginUserName}}</td>
			      					<td align="center">
			      						<span @click="editorrecord(li,'edite')" style="cursor: pointer;color:#609df9;">编辑</span>
							      		<span @click="editorrecord(li,'query')" style="cursor: pointer;color:#609df9;">查看</span>
			      					</td>							      					
			      									      										      					
			      				</tr>		      				
			      			</tbody>
			      			<tbody  v-else >
			      				<tr>
			      					<td colspan="11" align="center">暂无数据</td>
			      				</tr>
			      			</tbody>
	      		    </table>
	      		  </div>
		      </div>
		</el-dialog>
	    <!--编辑考勤记录组件-->
	    <editorAttenceRecord ref="editorAttenceRecord" :Record="attendenceRecord"></editorAttenceRecord>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	import editorAttenceRecord from './editorAttenceRecord'
	export default{
		props:["studentdetailprop"],
		components: {
		  	editorAttenceRecord
		  },
		data(){
			return {
				modalclose:false,
				attendenceRecord:null
			}
		},
		methods:{
			initData(){
               	//vm.router.push("/education_manage/student_manage");
               	this.$parent.initData();
				let paras={classId:this.studentdetailprop.classId,studentId:this.studentdetailprop.studentId,keyName:''};			
				this.$store.dispatch('studentAttence/getStudentAttendList',paras);	
				
			},
			handleClose(){
				console.log(this.AttendenceList);
				this.$store.dispatch('studentAttence/hidestudentAttencePanel');	
			},
			btnCancel(){
				this.$store.dispatch('studentAttence/hidestudentAttencePanel');	
			},
			btnOk(){
				this.$store.dispatch('studentAttence/hidestudentAttencePanel');	
			},
			/**
			 * 编辑考勤记录
			 */
			editorrecord(row,type){	
				//console.log(row)
				if(row.courseType==2){
					row.startTime = row.startTime.split(" ")[0];
				}
				//http://server.dev.vtron.com/alphakids/edumgr/class/list
				//http://server.dev.vtron.com/alphakids/edumgr/class/list
				this.attendenceRecord={
					type:type,
			    	//classSigninFormEntity:row.classSigninFormEntity,			    
			    	varsigninMode:row.signinMode,
			    	signinMode:row.signinMode,
			    	consumeHour:row.consumeHour,
			    	signinTime:row.signinTime,
			    	classSigninId:row.classSigninId,
			    	classSyllabusId:row.classSyllabusId,
			    	studentId:row.studentId,
			    	classId:row.classId,
			    	realName:row.realName,
			    	courseName:row.courseName,
			    	className:row.className,
			    	orderBy:row.orderBy,
			    	startTime:row.startTime,
			    	endTime:row.endTime,
			    	teacherUserName:row.teacherUserName,
			    	classHour:row.classHour,
			    	courseStatus:row.courseStatus,
			    	courseType:row.courseType
			    }
				this.$refs.editorAttenceRecord.updateAppraise(row);
				this.$store.dispatch('editorAttenceRecord/showeditorRecordPanel');			  
			}
		},
		computed:{
		
    	 ...mapState({                            
					  isShow:state=>state.studentAttence.studentAttenceDialog					
					}),
		 ...mapGetters("studentAttence",{
		 	          AttendenceList:"getStudentAttendList"
		 })
        }
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	.studentAttenceContainer{		
		
		.attenceList{
			width:100%;
			padding:0 .3rem 0.3rem .3rem;
		}
		/**自定义对话框标题样式**/
		.panel_title{				
			padding:.23rem .31rem .23rem .31rem;
			font-size: .22rem;	
		    font-family: "microsoft yahei";
		    color: #333333;		
		}
		/**
		 * 自定义对话框样式
		 */
		.el-dialog-bg{
			background: #FFFFFF;
			width:8rem;
			margin-top:15vh !important;
			border-radius: .1rem;
			.el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px !important;
			}	
			.el-dialog__footer{
				padding: .3rem;
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}		
		}
	}
</style>